<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('车辆信息列表')"/>
</head>


<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="formId">
                <div class="select-list">
                    <ul>
                        <li>
                            <label>车辆名称：</label>
                            <input type="text" name="carName"/>
                        </li>
                        <li>
                            <label>颜色：</label>
                            <select name="carColor" th:with="type=${@dict.getType('car_color')}">
                                <option value="">所有</option>
                                <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                                        th:value="${dict.dictValue}"></option>
                            </select>
                        </li>
                        <li>
                            <label>车牌号：</label>
                            <input type="text" name="carCard"/>
                        </li>
                        <li>
                            <label>车辆状态：</label>
                            <select name="carStatus" th:with="type=${@dict.getType('category_status')}">
                                <option value="">所有</option>
                                <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                                        th:value="${dict.dictValue}"></option>
                            </select>
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i
                                    class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i
                                    class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>

        <div class="btn-group-sm" id="toolbar" role="group">
            <a class="btn btn-success" onclick="$.operate.add()" shiro:hasPermission="car:manage:add">
                <i class="fa fa-plus"></i> 添加
            </a>
            <a class="btn btn-primary single disabled" onclick="$.operate.edit()" shiro:hasPermission="car:manage:edit">
                <i class="fa fa-edit"></i> 修改
            </a>
            <a class="btn btn-danger multiple disabled" onclick="$.operate.removeAll()"
               shiro:hasPermission="car:manage:remove">
                <i class="fa fa-remove"></i> 删除
            </a>
            <a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="car:manage:export">
                <i class="fa fa-download"></i> 导出
            </a>
        </div>
        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table"></table>
        </div>
    </div>
</div>
<th:block th:include="include :: footer"/>

<!-- 在页面中添加一个模态框 -->
<div id="carApplyModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">用车申请表</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">

                <form id="carApplyForm">
                    <input type="hidden" name="carId" id="carId">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">编号：</label>
                        <div class="col-sm-9">
                            <input type="text" name="id" class="form-control" placeholder="保存后自动生成" readonly>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">名称：</label>
                        <div class="col-sm-9">
                            <input type="text" name="context" class="form-control" placeholder="请输入">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">创建人：</label>
                        <div class="col-sm-9">
                            <input type="text" name="createPerson"  class="form-control" placeholder=""
                                   th:value="${@permission.getPrincipalProperty('userName')}" readonly>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">创建时间：</label>
                        <div class="col-sm-9">
                            <input name="createTime" type="text" id="createTime" class="form-control" placeholder="" readonly>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">紧急程度：</label>
                        <div class="col-sm-9">
                            <select class="form-control m-b" name="level"
                                    th:with="type=${@dict.getType('level')}">
                                <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                                        th:value="${dict.dictValue}">

                                </option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">部门：</label>
                        <div class="col-sm-9">
                            <select id="departmentSelect" class="form-control" name="deptId">
                                <option value="">请选择部门</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">车牌号：</label>
                        <div class="col-sm-9">
                            <input id="carCard" type="text" name="carCard" class="form-control" placeholder="" readonly>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">车辆名称：</label>
                        <div class="col-sm-9">
                            <input id="carName" type="text" name="carName" class="form-control" placeholder="" readonly>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">开始时间：</label>
                        <div class="col-sm-9">
                            <div class="input-group date"><span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                <input name="startTime" type="text" class="form-control time-input" value="">
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">结束时间：</label>
                        <div class="col-sm-9">
                            <div class="input-group date"><span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                <input name="endTime" type="text" class="form-control time-input" value="">
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">始发地：</label>
                        <div class="col-sm-9">
                            <input type="text" name="startPlace" class="form-control" placeholder="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">目的地：</label>
                        <div class="col-sm-9">
                            <input type="text" name="destPlace" class="form-control" placeholder="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">司机：</label>
                        <div class="col-sm-9">
                            <select id="driverSelect" name="driverId" class="form-control m-b">
                                <option value="">请选择司机</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">司机电话：</label>
                        <div class="col-sm-9">
                            <input id="phoneNumberInput" type="text" name="" class="form-control" placeholder=""
                                   readonly>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">用车事由：</label>
                        <div class="col-sm-9">
                            <input type="text" name="reason" class="form-control" placeholder="请输入用车事由">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">附件：</label>
                        <div class="col-sm-8">
                            <input type="hidden" name="file">
                            <div class="file-loading">
                                <input class="form-control file-upload" id="file" name="file" type="file">
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">备注：</label>
                        <div class="col-sm-9">
                            <input type="text" name="notes" class="form-control" placeholder="请输入备注信息">
                        </div>
                    </div>


                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="submitCarApply()">提交</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<script th:inline="javascript">
    var role = [[${@permission.hasAnyRoles('admin,common')}]];
    var detailFlag = [[${@permission.hasPermi('car:manage:detail')}]];
    var editFlag = [[${@permission.hasPermi('car:manage:edit')}]];
    var removeFlag = [[${@permission.hasPermi('car:manage:remove')}]];
    var carColorDatas = [[${@dict.getType('car_color')}]];
    var carStatusDatas = [[${@dict.getType('category_status')}]];
    var prefix = ctx + "car/manage";

    $(function () {
        var options = {
            url: prefix + "/list",
            createUrl: prefix + "/add",
            updateUrl: prefix + "/edit/{id}",
            detailUrl: prefix + "/detail/{id}",
            removeUrl: prefix + "/remove",
            exportUrl: prefix + "/export",
            modalName: "车辆信息",
            columns: [{
                checkbox: true
            },
                {
                    field: 'id',
                    title: '车辆编号',
                    visible: true
                },
                {
                    field: 'carName',
                    title: '车辆名称'
                },
                {
                    field: 'carColor',
                    title: '颜色',
                    formatter: function (value, row, index) {
                        return $.table.selectDictLabel(carColorDatas, value);
                    }
                },
                {
                    field: 'carCard',
                    title: '车牌号'
                },
                {
                    field: 'createPersonId',
                    title: '创建人',
                    visible: true
                },
                {
                    field: 'createTime',
                    title: '创建时间'
                },
                {
                    field: 'carStatus',
                    title: '车辆状态',
                    formatter: function (value, row, index) {
                        return $.table.selectDictLabel(carStatusDatas, value);
                    }
                },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function (value, row, index) {
                        var actions = [];
                        if (row.carStatus === '1') {
                            actions.push('<a class="btn btn-warning btn-xs ' + role + '" href="javascript:void(0)" onclick="$.operate.detail(\'' + row.id + '\')"><i class="fa fa-random"></i>查看</a> ');
                            actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="$.operate.edit(\'' + row.id + '\')"><i class="fa fa-edit"></i>编辑</a> ');
                            actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.id + '\')"><i class="fa fa-remove"></i>删除</a> ');
                            actions.push('<a disabled="true" id="applyForVehicleBtn' + row.id + ' " class="btn btn-info btn-xs" shiro:hasPermission="car:apply"><i class="fa fa-car"></i>用车申请</a>');
                            return actions.join('');
                        } else if (row.carStatus === '0') {
                            actions.push('<a class="btn btn-warning btn-xs ' + role + '" href="javascript:void(0)" onclick="$.operate.detail(\'' + row.id + '\')"><i class="fa fa-random"></i>查看</a> ');
                            actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="$.operate.edit(\'' + row.id + '\')"><i class="fa fa-edit"></i>编辑</a> ');
                            actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.id + '\')"><i class="fa fa-remove"></i>删除</a> ');
                            actions.push('<a id="applyForVehicleBtn' + row.id + ' " class="btn btn-info btn-xs" onclick="applyForVehicle(\'' + row.id + '\')" shiro:hasPermission="car:apply"><i class="fa fa-car"></i>用车申请</a>');
                            return actions.join('');
                        }
                    }
                }]
        };
        $.table.init(options);
    });
</script>

<script>
    function applyForVehicle(carId) {

        var currentTime = new Date().toLocaleString();
        $("#createTime").val(currentTime);


        $.ajax({
            url: prefix + '/' + carId,
            type: 'GET',
            dataType: 'json',
            success: function (response) {
                if (response.code === 0) {
                    $('#carId').val(response.data.id);
                    $('#carCard').val(response.data.carCard);
                    $('#carName').val(response.data.carName);

                    $('#carApplyModal').modal('show');
                } else {
                    console.error('错误');
                }
            },
            error: function () {
                console.error('错误');
            }
        });
    }

    function submitCarApply() {
        if ($.validate.form()) {
            $.operate.save(prefix + "/apply", $('#carApplyForm').serialize(), function (response) {
                if (response.code === 0) {
                    var carId = $('#carId').val();
                    // 调用更新车辆状态的函数
                    updateCarStatus(carId);
                } else {
                    console.error('用车申请提交失败');
                }
            });
        }
        $('#carApplyModal').modal('hide');
    }

    // 清空模态框中的文本框值
    $('#carApplyModal').on('hidden.bs.modal', function () {
        $(this).find('input[type=text], select').val('');
    });
</script>


<script>
    function updateCarStatus(carId) {
        $.ajax({
            url: prefix + '/updateCarStatus',
            type: 'POST',
            dataType: 'json',
            data: {
                carId: carId
            },
            success: function (response) {
                if (response.success) {
                    // 成功处理
                    console.log('车辆状态更新成功');
                } else {
                    // 处理失败
                    console.error('车辆状态更新失败');
                }
            },
            error: function (xhr, status, error) {
                // 处理错误
                console.error('车辆状态更新失败', error);
            }
        });
    }


    $(document).ready(function () {
        $.ajax({
            url: prefix + '/getUserList',
            type: 'GET',
            dataType: 'json',
            success: function (response) {
                // 获取到用户列表后，填充到下拉框中
                var userList = response.data;
                var selectElement = $('#driverSelect');
                $.each(userList, function (index, user) {
                    selectElement.append($('<option>', {
                        value: user.userId,
                        text: user.userName
                    }));
                });
            },
            error: function (xhr, status, error) {
                console.error('错误', error);
            }
        });
    });

    // 监听下拉框的选择事件
    $('#driverSelect').change(function () {
        var selectedUserId = $(this).val();
        $.ajax({
            url: prefix + '/getUserPhoneNumber',
            type: 'GET',
            dataType: 'json',
            data: {
                userId: selectedUserId
            },
            success: function (response) {
                if (response.code === 0) {
                    var phoneNumber = response.data.phonenumber;
                    $('#phoneNumberInput').val(phoneNumber);
                } else {
                    console.error('获取用户信息失败');
                }
            },
            error: function (xhr, status, error) {
                console.error('错误', error);
            }
        });
    });

    $(document).ready(function () {
        $.ajax({
            url: prefix + '/getDepartments',
            type: 'GET',
            dataType: 'json',
            success: function (response) {
                var departments = response.data;
                var selectElement = $('#departmentSelect');
                $.each(departments, function (index, department) {
                    selectElement.append($('<option>', {
                        value: department.deptId,
                        text: department.deptName
                    }));
                });
            },
            error: function (xhr, status, error) {
                console.error('错误', error);
            }
        });
    });

</script>


<style>
    .modal-dialog {
        width: 700px;
        height: 1000px;
    }
</style>


</body>
</html>